<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        html,
        body {
            height: 100%;
        }

        #wrap {
            height: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-flex-flow: column;
        }

        #header {
            text-align: center;
            background-color: #F0AD4E;
            color: #fff;
            width: 100%;
            height: 40px;
        }

        #header h1 {
            font-size: 20px;
            line-height: 44px;
            margin: 0em;
            color: #fff;
        }

        #main {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
        }

        #footer {
            height: 30px;
            line-height: 30px;
            /*background-color: #81a9c3;*/
            width: 100%;
            text-align: center;
        }

        #footer h5 {
            color: white;
        }

        .con {
            font-size: 28px;
            text-align: center;
        }

        #con {
            margin: 10px;
            font-size: 24px;
        }

        ul {
            margin-bottom: 10px;
        }

        ul li {
            margin: 5px 10px;
            padding: 5px;
            color: #000;
            word-wrap: break-word;
        }

        .highlight {
            opacity: .7;
        }

        .aui-bar {
            background-color: #ffffff;
            color: #aaaaaa;
            font-weight: bold;
        }

        .aui-bar .aui-active {
            /*background-color: black;*/
            /*color: #055083;*/
            color: #F0AD4E;
            font-weight: bold;
        }

        .aui-title {
            font-weight: normal;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="header" class="aui-bar aui-bar-nav">

            <div class="aui-pull-left aui-btn" onclick="fnOpenCityListWin()">
                <span class="currentCity" id="testtest" data-code="0831">宜宾</span>&nbsp;<span class="aui-iconfont aui-icon-down" style="font-size:14px;padding-top:5px"></span>
            </div>
            <div class="aui-title">金盾巡防</div>
            <div class="aui-pull-right aui-btn">
                <span class="aui-iconfont aui-icon-search"></span>
            </div>

        </div>
        <div id="main"></div>
        <div>
            <footer class="aui-bar aui-bar-tab">
                <div class="aui-bar-tab-item aui-active" tapmode="highlight" onclick="fnSwitchFrame(0)">
                    <i class="aui-iconfont aui-icon-home"></i>
                    <div class="aui-bar-tab-label">首页</div>
                </div>
                <div class="aui-bar-tab-item" tapmode="highlight" onclick="fnSwitchFrame(1)">
                    <i class="aui-iconfont aui-icon-question"></i>
                    <div class="aui-bar-tab-label">客服</div>
                </div>
                <div class="aui-bar-tab-item" tapmode="highlight" onclick="fnSwitchFrame(2)">
                    <i class="aui-iconfont aui-icon-star"></i>
                    <div class="aui-bar-tab-label">活动</div>
                </div>
                <div class="aui-bar-tab-item" tapmode="highlight" onclick="fnSwitchFrame(3)">
                    <i class="aui-iconfont aui-icon-my"></i>
                    <div class="aui-bar-tab-label">我的</div>
                </div>
            </footer>
        </div>
    </div>




</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
    var headerH, footerH, frameH;
    var tabs, frames, banner_lst, frames_group, switchs;
    apiready = function() {

        api.addEventListener({
            name: 'keymenu'
        }, function(ret, err) {
            alert('按了菜单键');
        });

        api.addEventListener({
            name: 'longpress'
        }, function(ret, err) {
            alert('长按了页面');
        });

        var aMap = api.require('aMap');

        aMap.getLocation(function(ret, err) {
            if (ret.status) {
                // alert(JSON.stringify(ret));
                aMap.getNameFromCoords({
                    lon: ret.lon,
                    lat: ret.lat
                }, function(ret, err) {
                    if (ret.status) {
                        aMap.stopLocation();

                        city = ret.city;
                        city = city.replace('市', '');
                        citycode = ret.citycode;

                        var userInfo = {};
                        userInfo.region = city;
                        userInfo.citycode = citycode;
                        $api.setStorage('userInfo', userInfo);

                        var currentCity = $api.domAll('.currentCity');
                        for (var i = 0; i < currentCity.length; i++) {
                            currentCity[i].innerHTML = city;
                            currentCity[i].setAttribute('data-code', citycode);
                        };

                        //fnSwitchFrame(0);
                        fnOpenFrameGroup(0);

                        getBannerLst(citycode);


                    } else {
                        //alert(JSON.stringify(err));
                    }
                });

            } else {
                //alert(JSON.stringify(err));
            }
        });


        frames = ['home', 'star', 'cart', 'my'];

        frames_group = [{
            name: 'home',
            url: './home.html',
            bgColor: '#fff',
            pageParam: {
                tabsi: 0
            }
        }, {
            name: 'star',
            url: './star.html',
            bgColor: '#fff',
            bounces: true,
            pageParam: {
                tabsi: 1
            }
        }, {
            name: 'cart',
            url: './cart.html',
            bgColor: '#fff',
            bounces: true,
            pageParam: {
                tabsi: 2
            }
        }, {
            name: 'my',
            url: './my.html',
            bgColor: '#fff',
            bounces: false,
            pageParam: {
                tabsi: 3
            }
        }];



        var header = $api.byId('header');
        //适配iOS7+，Android4.4+状态栏沉浸式效果，详见config文档statusBarAppearance字段
        $api.fixIos7Bar(header);
        //$api.fixStatusBar(header);


        //导航
        var footer = $api.dom('footer');
        tabs = $api.domAll(footer, '.aui-bar-tab-item');

        //动态计算header的高度，因iOS7+和Android4.4+上支持沉浸式效果，
        //因此header的实际高度可能为css样式中声明的44px加上设备状态栏高度
        //其中，IOS状态栏高度为20px，Android为25px
        headerH = $api.offset(header).h;
        //footer高度为css样式中声明的30px
        footerH = $api.offset($api.dom('footer')).h;
        //frame的高度为当前window高度减去header和footer的高度
        frameH = api.winHeight - headerH - footerH;

        fnModifyCity();
        //默认开启第一个frame
        fnKeyback();
        getCitylist();
    };

    function getCitycode() {
        getBannerLst($api.getStorage('userInfo').citycode);
        alert(JSON.stringify($api.getStorage('banners')));
    }

    function fnModifyCity() {
        api.addEventListener({
            name: 'city_selected'
        }, function(ret, err) {
            var userInfo = $api.getStorage('userInfo');
            var city = '北京';
            if (userInfo) {
                city = userInfo.region;
                citycode = userInfo.citycode;
            }
            if (city.length > 3) {
                city = city.substring(0, 3) + '...';
            }
            var currentCity = $api.domAll('.currentCity');
            for (var i = 0; i < currentCity.length; i++) {
                currentCity[i].innerHTML = city;
                currentCity[i].setAttribute('data-code', citycode);
            };
        });
    };

    function fnOpenCityListWin() {
        api.openWin({
            name: 'citylist',
            url: './citylist.html',
            delay: 200
        });
    };

    function getCitylist() {
        api.ajax({
            url: 'http://192.168.1.100/api/city/citylist',
            method: 'get',
            dataType: 'JSON',
            data: {
                values: {
                    token: 'haha'
                }
            }
        }, function(ret, err) {

        });

    }

    function getBannerLst(code) {
        api.ajax({
            url: 'http://192.168.1.100/banner_lst/' + code,
            method: 'post',
            dataType: 'JSON',
            data: {
                values: {
                    token: 'haha'
                }
            }
        }, function(ret, err) {
            if (ret) {
                //alert( JSON.stringify( ret ) );
                banner_lst = ret;
                $api.setStorage('banners', banner_lst);

                setTimeout(function() {
                    api.execScript({
                        name: 'main',
                        frameName: 'home',
                        script: 'reloadScroll();'
                    });
                }, 1000);

            } else {
                //alert(JSON.stringify(err));
            }
        });
    }

    function fnSwitchFrame(index) {
        for (var i = 0; i < 4; i++) {
            if (index == i) {
                $api.addCls(tabs[i], 'aui-active');
                fnOpenFrame(index);
            } else {
                $api.removeCls(tabs[i], 'aui-active');
                fnOpenFrame(index);
            }
        }
    }

    function fnOpenFrameGroup(index) {
        api.openFrameGroup({
            name: 'main_group',
            background: '#fff',
            scrollEnabled: true,
            rect: {
                x: 0,
                y: headerH,
                w: 'auto',
                h: frameH
            },
            index: index,
            frames: frames_group
        }, function(ret, err) {
            for (var i = 0; i < tabs.length; i++) {
                if (ret.index == i) {
                    $api.addCls(tabs[i], 'aui-active');
                } else {
                    $api.removeCls(tabs[i], 'aui-active');
                }
            }
        });

    }

    function fnOpenFrame(index) {
        for (var i = 0; i < tabs.length; i++) {
            if (index == i) {
                $api.addCls(tabs[i], 'aui-active');
            } else {
                $api.removeCls(tabs[i], 'aui-active');
            }
        }
        api.setFrameGroupIndex({
            name: 'main_group',
            index: index,
            scroll: true
        });

        // for (var i = 0; i < frames.length; i++) {
        //     if (index == i) {
        //         // api.openFrame({
        //         //     name: frames[i],
        //         //     url: './' + frames[i] + '.html',
        //         //     rect: {
        //         //         x: 0,
        //         //         y: headerH,
        //         //         w: 'auto',
        //         //         h: frameH
        //         //     },
        //         //     pageParam: {
        //         //         name: frames[i],
        //         //         banners: banner_lst
        //         //     },
        //         //     bounces: true,
        //         //     hScrollBarEnabled: false
        //         // });
        //         $api.addCls(tabs[i], 'aui-active');
        //
        //         api.setFrameGroupIndex({
        //             name: 'main_group',
        //             index: index,
        //             scroll: true
        //         });
        //
        //     } else {
        //
        //         $api.removeCls(tabs[i], 'aui-active');
        //         // api.setFrameAttr({
        //         //     name: frames[i],
        //         //     hidden: true
        //         // });
        //
        //     }
        // }
    }

    //监听退后键
    function fnKeyback() {
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            api.closeWidget();
        });
    };
</script>

</html>
